愛美是人的天性，版面漂漂亮亮不用說，原始碼當然也要整整齊齊，除了（程式）看著心情好比較不會找你麻煩（喂）以外，除錯也比較容易。
愛美是人的天性，版面漂漂亮亮不用說，原始碼當然也要整整齊齊，除了（程式）看著心情好比較不會找你麻煩（喂）以外，除錯也比較容易。
CSS寫在哪裡？答案是行內、head tag、css檔內都可以。只是為了維護方便，最好的方式還是寫在css檔中統一維護。以下將分享我寫CSS的一些習慣，有誤之處還請不吝指正。

首先是排列方式，我會把不同種類的CSS Code用長長的註解分開，例如：

/***************************這裡是架構***************************/

分類的話，會依照類型的不同分開放。
架構部份：像是.wrapper、.container、.left、.right等等。
通用樣式：字色、字連結色、線顏色、往左（右）浮動。
按鈕樣式：網站裡不同類型的按鈕。
區塊分類：其他非架構類的區塊。

這樣一排檔案就會呈現落落長的狀態，所以我會以頁為單位拆成不同的檔案，打算在不同頁讀入不同的檔案以減少CSS檔案大小，但最近發現這樣做是大錯特錯！！！Orz 又剛好正在學習Sass，只能說Import真好用，一次解決我心頭好多麻煩，不過Sass的使用心得就容我以後再補吧！

樣式的部份，我習慣分行並且用tab分段，像是：

.test {
    margin: 3px 3px 2px 0;/*如果四個數值都要同時設定，就直接上/右/下/左標示*/
    margin-left: 0;/*但如果避免蓋掉部份設定就會分開寫*/
    padding: 3px;/*四個數值都一樣就直接簡寫*/
    text-align: left;
    height: auto;
    background: #ccc url(../content/img/bg.jpg) top no-repeat;/*順序為顏色、背景圖、圖片位置、是否重複*/
    border-bottom: 1px solid #eee;/*線的顏色設定順序為：寬度、樣式、顏色*/
}

附帶一提，class跟 “{” 之間一定要空格！樣式的“:”跟數值之間也要空一格。別問我為什麼，我就覺得這樣比較好xD。

樣式的排列方式我會盡量把比較相關的擺在一起，例如color跟font-weight、width跟height；忘記曾經在哪裡看過支持樣式按照英文字母排序的方式寫下來比較好找，但自己實際試驗過後很不習慣，又改回目前使用的習慣。

接著是樣式命名。以前年紀小不懂事（咦）的時候會這樣作：span.line，後來發現一旦Html有修改，還要再回CSS檔把span刪除，而且也不能全部套用在不同標籤卻有同款樣式的地方，真是太不方便了～要多多注意喔！

以上是我的CSS撰寫習慣，歡迎各位提出討論唷！我們明天見～

本文同步發表於http://azzurro.blog.aznc.cc/make_a_website_12/